<template>
  <div class="blackView">
    <Map v-show="isShow"
      v-if="laneMsgControl"
      :load="getMap1Area"
      :map-center="mapsCenterWkt"
      :zoom="11.6"
      class="blackView"
    ></Map>
    <!-- <div>
      <LeftTip :act="2" :tab="2"></LeftTip>
    </div> -->
    <div class="optBtn">
      <div @click="setDrop(1)" :class="`optBtnBut ${showFirBtn ? 'optBtnTop' : ''}`">现状流量</div>
      <div @click="setDrop(2)" :class="`optBtnBut optBtnBom ${!showFirBtn ? 'optBtnTop' : ''}`">诱导分流</div>
    </div>
    <div class="optRight">
      <div v-if="showFirBtn">
        <el-table
          :data="numsListL"
          class="el_table"
          ref="topTable"
          :stripe="true"
          :row-class-name="rowClassName"
          @selection-change="handleSelectionChange"
          @select-all="handleSelectAll"
          style="width: 170px; max-height: 352px; overflow-y: auto;">
          <el-table-column
            type="selection"
            :selectable="selectedRowL"
            width="45">
          </el-table-column>
          <el-table-column
            prop="start"
            label="起点"
            align="left"
            width="125">
          </el-table-column>
        </el-table>
        <el-table
          :data="numsListB"
          class="el_table el_table_NoTitle"
          ref="botTable"
          :stripe="true"
          :row-class-name="rowBotClassName"
          @selection-change="handleSelectionChangeB"
          style="width: 170px; max-height: 352px; overflow-y: auto;">
          <el-table-column
            type="selection"
            :selectable="selectedRowB"
            width="45">
          </el-table-column>
          <el-table-column
            prop="start"
            label="起点"
            align="left"
            width="125">
          </el-table-column>
        </el-table>
      </div>
      <div v-if="showFirBtn">
        <el-table
          :data="numsListR"
          class="el_table el_right_table"
          ref="elTableR"
          :stripe="true"
          :row-class-name="rowRightClassName"
          @selection-change="handleSelectionChangeR"
          @select-all="handleSelectAllRight"
          style="width: 170px; max-height: 352px; overflow-y: auto;">
          <el-table-column
            type="selection"
            :selectable="selectedRowR"
            width="45">
          </el-table-column>
          <el-table-column
            prop="end"
            label="终点"
            align="left"
            width="125">
          </el-table-column>
        </el-table>
        <el-table
          :data="numsListD"
          class="el_table el_right_table el_table_NoTitle"
          ref="botRightTable"
          :stripe="true"
          :row-class-name="rowDoeClassName"
          @selection-change="handleSelectionChangeD"
          style="width: 170px; max-height: 352px; overflow-y: auto;">
          <el-table-column
            type="selection"
            :selectable="selectedRowD"
            width="45">
          </el-table-column>
          <el-table-column
            prop="end"
            label="终点"
            align="left"
            width="125">
          </el-table-column>
        </el-table>
      </div>



      <div v-if="!showFirBtn" style="display: flex;">
        <el-table
          :data="numsListK"
          class="el_table"
          ref="elTable"
          :stripe="true"
          :row-class-name="rowClassName"
          @selection-change="handleSelectionChangeSet"
          style="width: 170px; max-height: 352px; overflow-y: auto;">
          <el-table-column
            type="selection"
            width="45">
          </el-table-column>
          <el-table-column
            prop="start"
            label="江北"
            align="left"
            width="125">
          </el-table-column>
        </el-table>
        <el-table
          v-if="!showFirBtn"
          :data="numsListW"
          class="el_table el_right_table"
          ref="elTable"
          :stripe="true"
          :row-class-name="rowRightClassName"
          @selection-change="handleSelectionChangeT"
          style="width: 170px; max-height: 352px; overflow-y: auto;">
          <el-table-column
            type="selection"
            width="45">
          </el-table-column>
          <el-table-column
            prop="end"
            label="江南"
            align="left"
            width="125">
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import Map from '@/components/map1.vue'
import LeftTip from './tab/leftTip.vue'
import{
  getDeviceVolume,
  getDeviceGisData,
  getAreaOdLineWkt,
  getAreaOd,
  getAreaInfo
} from '@/api/api.js';
export default {
  name: 'od',
  components: {
    Map,
    LeftTip
  },
  data() {
    return {
      numsList: [
        {
          start: '城中清江路以南',
          end: '城中清江路以南',
          level: 2
        },
        {
          start: '城中清江路以北',
          end: '城中清江路以北',
          level: 2
        },
        {
          start: '城西',
          end: '城西',
          level: 2
        },
        {
          start: '城东',
          end: '城东',
          level: 2
        },
        {
          start: '城西北',
          end: '城西北',
          level: 2
        },
        {
          start: '城北',
          end: '城北',
          level: 2
        },
        {
          start: '滨江-长河路以西',
          end: '滨江-长河路以西',
          level: 1
        },
        {
          start: '滨江-长河路以东',
          end: '滨江-长河路以东',
          level: 1
        },
        {
          start: '萧山北部',
          end: '萧山北部',
          level: 1
        },
        {
          start: '机场周边',
          end: '机场周边',
          level: 1
        },
        {
          start: '萧山南部',
          end: '萧山南部',
          level: 1
        }
      ],
      numsListL: [
        {
          start: '城中清江路以南',
          remark: 1,
        },
        {
          start: '城中清江路以北',
          remark: 1,

        },
        {
          start: '城西',
          remark: 1,

        },
        {
          start: '城东',
          remark: 1,

        },
        {
          start: '城西北',
          remark: 1,

        },
        {
          start: '城北',
          remark: 1,

        }
      ],
      numsListR: [
        {
          end: '城中清江路以南',
          remark: 1,
        },
        {
          end: '城中清江路以北',
          remark: 1,

        },
        {
          end: '城西',
          remark: 1,

        },
        {
          end: '城东',
          remark: 1,

        },
        {
          end: '城西北',
          remark: 1,

        },
        {
          end: '城北',
          remark: 1,

        }
      ],
      numsListB: [
        {
          start: '滨江-长河路以西',
          remark: 1,
        },
        {
          start: '滨江-长河路以东',
          remark: 1,
        },
        {
          start: '萧山北部',
          remark: 1,
        },
        {
          start: '机场周边',
          remark: 1,
        },
        {
          start: '萧山南部',
          remark: 1,
        }
      ],
      numsListD: [
        {
          end: '滨江-长河路以西',
          remark: 1,
        },
        {
          end: '滨江-长河路以东',
          remark: 1,
        },
        {
          end: '萧山北部',
          remark: 1,
        },
        {
          end: '机场周边',
          remark: 1,
        },
        {
          end: '萧山南部',
          remark: 1,
        }
      ],
      numsListK: [
        {
          start: '城中清江路以南',
          remark: 1,
        },
        {
          start: '城中清江路以北',
          remark: 1,

        },
        {
          start: '城西',
          remark: 1,

        },
        {
          start: '城东',
          remark: 1,

        },
        {
          start: '城西北',
          remark: 1,

        },
        {
          start: '城北',
          remark: 1,

        }
      ],
      numsListW: [
        {
          end: '滨江-长河路以西',
          remark: 1,
        },
        {
          end: '滨江-长河路以东',
          remark: 1,
        },
        {
          end: '萧山北部',
          remark: 1,
        },
        {
          end: '机场周边',
          remark: 1,
        },
        {
          end: '萧山南部',
          remark: 1,
        }
      ],
      multipleSelection: [],
      multipleSelectionB: [],
      multipleSelectionR: [],
      multipleSelectionD: [],
      gradient: {
        0.5: 'blue',
        0.65: 'rgb(117,211,248)',
        0.7: 'rgb(0, 255, 0)',
        0.9: '#ffea00',
        1.0: 'red'
      },
      showTra: false,
      laneMsgControl: true,
      mapsCenterWkt: [120.222245,30.241048],
      isShow: true,
      heatmap:null,
      removeHeatMap: [],
      type: 'home',
      removeCrossMarkerIcon: [],
      removeOdPoiIcon: [],
      odAreas: [],
      odAniLines: [],
      odLineData: [],
      showFirBtn: true,
      clickInfos: [],
      polyLineList: [],
      selectedRows: [],
      selectedRightRows: [],
      selectedBotRows: [],
      selectedDoeRows: []
    }
  },
  created(){
  },
  mounted(){
  },
  methods: {
    getMap1Area(){
      let that = this
      this.setOdInfo()
      this.getODData()
    },
    async getODData(){
      let res = await getAreaOd()
      if(res.data.data){
        this.odLineData = res.data.data
      }
    },
    async setArea(){
      let start = this.multipleSelection.map(item => item.start)
      let end = this.multipleSelectionR.map(item => item.end)
      let param = {
        stList: start,
        endList: end
      }
      let params = JSON.stringify(param)
      let res = await getAreaOdLineWkt({ params })
      if(res.data.data){
        this.getAreaArrow(res.data.data)
      }
    },
    getAreaArrow(data){
      this.removePolyLineList()
      data.forEach(item => {
        let lineColor = ''
        if(item.lineNo == 'A'){
          lineColor = '#a8a937'
        }else if(item.lineNo == 'B'){
          lineColor = '#0b65c1'
        } else if(item.lineNo == 'C'){
          lineColor = '#1ac72e'
        }
        let wkt = item.wkt.split(';')
        let wkts = []
        wkt.forEach(key => {
          wkts.push(key.split(','))
        })
        let polyLine = new AMap.Polyline({
          path: wkts,
          isOutline: false,
          outlineColor: '#ffeeff',
          borderWeight: 1,
          strokeColor: lineColor,
          strokeOpacity: 1,
          strokeWeight: 10,
          // 折线样式还支持 'dashed'
          strokeStyle: "solid",
          // strokeStyle是dashed时有效
          strokeDasharray: [10, 5],
          lineJoin: 'round',
          lineCap: 'round',
          zIndex: 149,
          showDir: true
        })
        polyLine.id = item.id
        window.map1.add(polyLine)
        this.polyLineList.push(polyLine)
        polyLine.on('click', () => {
          this.setAtPolyline(polyLine.id)
        })
      })
    },
    setAtPolyline(Id){
      let clickLine = null
      this.polyLineList.forEach(item => {
        if(item.id == Id){
          clickLine = item
          window.map1.remove(item)
        }
      })
      window.map1.add(clickLine)
      this.polyLineList.push(clickLine)
    },
    removePolyLineList(){
      this.polyLineList.forEach(item => {
        window.map1.remove(item)
      })
      this.polyLineList = []
    },
    setOd(){
      this.removeOdLines()
      if(window.location.href.indexOf('od') == -1) return
      // this.drawOdArea(data)
      let start1 = this.multipleSelection.map(item => item.start)
      let start2 = this.multipleSelectionB.map(item => item.start)
      let end1 = this.multipleSelectionR.map(item => item.end)
      let end2 = this.multipleSelectionD.map(item => item.end)
      let start = [...start1, ...start2]
      let end = [...end1, ...end2]
      let data = []
      console.log(this.odLineData, this.multipleSelectionR, start, end)
      this.odLineData.forEach(item => {
        start.forEach(key => {
          end.forEach(is => {
            if(item.o_name == key && item.d_name == is){
              data.push(item)
            }
          })
        })
      })
      console.log(data)
      if(data.length){
        let data1 = data.filter(item => item.level == 2)
        let data2 = data.filter(item => item.level == 3)
        data1.length && this.drawOdLocalayerFun(data1, ['rgb(17, 135, 131)'])
        data2.length && this.drawOdLocalayerFun(data2, ['rgb(127, 124, 85)'])
      }
      // let data1 = data.filter(item => item.level == 2)
      // let data2 = data.filter(item => item.level == 3)
      // this.drawOdLocalayerFun(data1, ['rgb(17, 135, 131)'])
      // this.drawOdLocalayerFun(data2, ['rgb(127, 124, 85)'])
      // this.getAreaInfo(data)
    },
    async setOdInfo(){
      let res = await getAreaInfo()
      if(res.data.data){
        this.drawOdArea(res.data.data)
      }
    },
    drawOdArea(data){ // 画od区域面
      let that = this
      data.forEach(item => {
        let wkts = item.wkt.split(';').map(item => {
          return item.split(',')
        })
        let color = ''
        switch(item.area_name){
          case '萧山南部':
            color = '#8b4bb1'
            break;
          case '滨江-长河路以西':
            color = '#4b494c'
            break;
          case '滨江-长河路以东':
            color = '#c583e7'
            break;
          case '萧山北部':
            color = '#2812ae'
            break;
          case '机场周边':
            color = '#1280ae'
            break;
          case '城中清江路以南':
            color = '#d27b0c'
            break;
          case '城中清江路以北':
            color = '#1bb009'
            break;
          case '城东':
            color = '#102fdd'
            break;
          case '城西':
            color = '#5a5d71'
            break;
          case '城西北':
            color = '#9fa950'
            break;
          case '城北':
            color = '#85312c'
            break;
        }
        var polygon = new AMap.Polygon({
          strokeColor: color,
          strokeOpacity: 0.6,
          fillColor: color,
          fillOpacity: 0.6,
          // fillOpacity: 1,
          path: wkts,
          zIndex: 5
        })
        window.map1.add(polygon)
        this.odAreas.push(polygon)
        // 添加od区域的点
        // let oWkts = []
        // let dWkts = []
        // oWkts.push(item.o_wkt)
        // dWkts.push(item.d_wkt)
        // oWkts.length && oWkts.forEach((key, index) => {
        //   let wkt = key.split(',')
        //   let marker = new AMap.Marker({
        //     position: new AMap.LngLat(wkt[0], wkt[1]),
        //     content: that.getinterMarkerElOd(wkt, 'marker1', item),
        //     offset: new AMap.Pixel(-20, -20)
        //   });
        //   window.map1.add(marker)
        //   this.removeOdPoiIcon.push(marker)
        // })
        // dWkts.length && dWkts.forEach((key, index) => {
          let wkt = item.center_point.split(',')
          let marker2 = new AMap.Marker({
            position: new AMap.LngLat(wkt[0], wkt[1]),
            content: that.getinterMarkerElOd(wkt, 'marker2', item),
            offset: new AMap.Pixel(-20, -20)
          });
          window.map1.add(marker2)
          this.removeOdPoiIcon.push(marker2)
        // })
      })
    },
    removeOdPoiIcons(){ // 移除od图标
      if(this.removeOdPoiIcon.length){
        this.removeOdPoiIcon.forEach(item => {
          window.map1.remove(item)
        })
      }
      this.removeOdPoiIcon = []
    },
    getinterMarkerElOd(wkt, index, item){
      let that = this
      let el = document.createElement("div")
      el.innerHTML = `<div class="od-icon-box">${item.area_name}</div>`
      el.tabIndex = index
      el.className = `od-icon id_${wkt}`
      return el
    },
    drawOdLocalayerFun(data, lineColor){
      let that= this
      let features = []
      data.forEach(item => {
        let wkts = []
        let first = item.o_wkt.split(',')
        let last = item.d_wkt.split(',')
        wkts.push(first, last)
        features.push({
          "type": 'Feature',
          "geometry": {
            "type": 'LineString',
            "coordinates": wkts
          },
          "properties": item
        })
      })
      let lineGeo = {
        "type": 'FeatureCollection',
        "features": features
      }
      let geoDataLine = new Loca.GeoJSONSource({
        data: lineGeo,
      });
      let linkLayer = new Loca.PulseLinkLayer({ // PulseLinkLayer 弧线
        zIndex: 200,
        opacity: 1,
        visible: true,
        zooms: [2, 22]
      });
      linkLayer.setSource(geoDataLine);
      linkLayer.setStyle({
        height:(index,item)=>{
          return item.distance / 2
        },
        unit:'meter',
        dash:[200,0,200,0],
        lineWidth:function(index,prop){ // 线的宽度 近点，远点
          if(prop.link.properties.label == 1){
            return [50,50];
          } else if(prop.link.properties.label == 2){
            return [70,70];
          } else if(prop.link.properties.label == 3){
            return [90,90];
          } else if(prop.link.properties.label == 4){
            return [110,110];
          } else if(prop.link.properties.label == 5){
            return [130,130];
          }
        },
        smoothSteps: 60,
        speed:function(index,prop){
          return 100 + Math.random()*5000
        },
        flowLength:120,
        lineColors:function(index,feat){
          // return ['rgb(255,221,0)','rgb(255,141,27)','rgb(65,0,255)'];17, 135, 131,    
          return lineColor;
        },
        
        maxHeightScale:0.3,
        headColor:'rgba(255, 255, 0, 1)',
        trailColor:'rgb(255,84,84)',
      })
      window.mapLoca1.add(linkLayer)
      this.odAniLines.push(linkLayer)
      geoDataLine.destroy()
      window.mapLoca1.animate.start()
      window.map1.setPitch(35,false,0)

      let clickInfo = new AMap.Marker({
        anchor: 'bottom-center',
        position: [120.141409, 30.319025, 0],
      });
      clickInfo.setMap(window.map1);
      window.map1.on("mousemove", function (e) {
        var feat = linkLayer.queryFeature(e.pixel.toArray());
        if (feat) {
          clickInfo.show();
          clickInfo.setPosition([e.lnglat.lng, e.lnglat.lat]);
          clickInfo.setContent(
            '<div style="text-align: center; height: 20px; white-space: nowrap; transform: translateY(5px); color: #CCC; font-size: 14px;">' +
            '流量: ' + feat.properties['volume'] +
            '</div>'
          );
        } else {
          clickInfo.hide()
          // that.clickInfos.forEach(item => {
          //   item.hide()
          // })
        }
        that.clickInfos.push(clickInfo)
      });
    },
    setCross(data){
      if(window.location.href.indexOf('od') == '-1') return
      data.forEach((item, index) => {
        let centerWkt = item.wkt.split(',')
        let marker = new AMap.Marker({
          position: new AMap.LngLat(centerWkt[0], centerWkt[1]),
          content: this.getCrossDisInfoMarkerIcon(index, Number(item.type)),
          offset: new AMap.Pixel(-10, -10)
        });

        window.map1.add(marker)
        this.removeCrossMarkerIcon.push(marker)
      })
    },
    getCrossDisInfoMarkerIcon(index, type){
      let crossClass = ''
      switch(type){
        case 1:
          crossClass = 'crossAreaA'
          break;
        case 2:
          crossClass = 'crossAreaB'
          break;
        case 3:
          crossClass = 'crossAreaC'
          break;
        case 4:
          crossClass = 'crossAreaD'
          break;
        case 5:
          crossClass = 'crossAreaE'
          break;
        case 6:
          crossClass = 'crossAreaF'
          break;
        case 7:
          crossClass = 'crossAreaG'
          break;
        case 8:
          crossClass = 'crossAreaH'
          break;
        case 9:
          crossClass = 'crossAreaI'
          break;
        case 10:
          crossClass = 'crossAreaJ'
          break;
        case 11:
          crossClass = 'crossAreaK'
          break;
      }
      let el = document.createElement("div");
      el.className = `crossArea ${crossClass}`;
      el.tabIndex = index;
      el.id = `id_${index}`;
      return el;
    },
    handleSelectionChange(val) {
      console.log(val)
      this.removeClickInfo()
      this.selectedRows = val; // 更新选中的行数组
      this.multipleSelection = val

      this.setOd()
      if(!this.showFirBtn){
        this.setArea()
      }
      this.setSelect()
    },
    handleSelectionChangeB(val) {
      console.log(val)
      this.removeClickInfo()
      this.selectedBotRows = val; // 更新选中的行数组
      this.multipleSelectionB = val
      this.setOd()
      if(!this.showFirBtn){
        this.setArea()
      }
      this.setSelect()
    },
    handleSelectionChangeR(val) {
      this.removeClickInfo()
      this.selectedRightRows = val; // 更新选中的行数组
      this.multipleSelectionR = val
      this.setOd()
      if(!this.showFirBtn){
        this.setArea()
      }
      this.setSelect()
    },
    handleSelectionChangeD(val) {
      this.removeClickInfo()
      this.selectedDoeRows = val; // 更新选中的行数组
      this.multipleSelectionD = val
      this.setOd()
      if(!this.showFirBtn){
        this.setArea()
      }
      this.setSelect()
    },

    handleSelectionChangeT(val) {
      this.removeClickInfo()
      this.selectedRightRows = val; // 更新选中的行数组
      this.multipleSelectionR = val
      this.setOd()
      if(!this.showFirBtn){
        this.setArea()
      }
    },
    handleSelectionChangeSet(val) {
      console.log(val)
      this.removeClickInfo()
      this.selectedRows = val; // 更新选中的行数组
      this.multipleSelection = val
      this.setOd()
      if(!this.showFirBtn){
        this.setArea()
      }
    },
    selectedRowL(row, rowIndex){
      if(row.remark == 1){
        return true
      } else {
        return false
      }
    },
    selectedRowB(row, rowIndex){
      if(row.remark == 1){
        return true
      } else {
        return false
      }
    },
    selectedRowR(row, rowIndex){
      if(row.remark == 1){
        return true
      } else {
        return false
      }
    },
    selectedRowD(row, rowIndex){
      if(row.remark == 1){
        return true
      } else {
        return false
      }
    },
    setSelect(){
      this.numsListL.forEach(item => {
        item.remark = 1
      })
      this.numsListR.forEach(item => {
        item.remark = 1
      })
      this.numsListB.forEach(item => {
        item.remark = 1
      })
      this.numsListD.forEach(item => {
        item.remark = 1
      })
      if(this.multipleSelectionR.length == 0 && this.multipleSelectionB.length == 0){
        if(this.multipleSelection.length != 0){
          this.numsListR.forEach(item => {
            item.remark = 2
          })
        }
        if(this.multipleSelectionD.length != 0){
          this.numsListB.forEach(item => {
            item.remark = 2
          })
        }
      }
      if(this.multipleSelection.length == 0 && this.multipleSelectionD.length == 0){
        if(this.multipleSelectionR.length != 0){
          this.numsListL.forEach(item => {
            item.remark = 2
          })
        }
        if(this.multipleSelectionB.length != 0){
          this.numsListD.forEach(item => {
            item.remark = 2
          })
        }
      }
      if(this.multipleSelection.length == 0 && this.multipleSelectionR.length == 0 && this.multipleSelectionB.length == 0 && this.multipleSelectionD.length == 0){
        this.numsListL.forEach(item => {
          item.remark = 1
        })
        this.numsListR.forEach(item => {
          item.remark = 1
        })
        this.numsListB.forEach(item => {
          item.remark = 1
        })
        this.numsListD.forEach(item => {
          item.remark = 1
        })
      }
    },
    rowClassName({ row }) {
      // 判断当前行的数据是否在已选中的行数组中
      if (this.selectedRows.includes(row)) {
        return 'selected-row'; // 返回自定义的类名
      }
      return ''; // 默认不添加类名
    },
    rowRightClassName({ row }){
      // 判断当前行的数据是否在已选中的行数组中
      if (this.selectedRightRows.includes(row)) {
        return 'selected-right-row'; // 返回自定义的类名
      }
      return ''; // 默认不添加类名
    },
    rowBotClassName({ row }){
      // 判断当前行的数据是否在已选中的行数组中
      if (this.selectedBotRows.includes(row)) {
        return 'selected-row'; // 返回自定义的类名
      }
      return ''; // 默认不添加类名
    },
    rowDoeClassName({ row }){
      // 判断当前行的数据是否在已选中的行数组中
      if (this.selectedDoeRows.includes(row)) {
        return 'selected-right-row'; // 返回自定义的类名
      }
      return ''; // 默认不添加类名
    },
    handleSelectAll(){
      // this.$refs.botTable.toggleAllSelection()
    },
    handleSelectAllRight(){
      // this.$refs.botRightTable.toggleAllSelection()
    },
    removeOdAreas(){
      if(this.odAreas.length){
        this.odAreas.forEach(item => {
          window.map1.remove(item)
        })
      }
      this.odAreas = []
    },
    removeOdLines(){
      if(this.odAniLines.length){
        this.odAniLines.forEach(item => {
          window.mapLoca1.remove(item)
        })
      }
      this.odAniLines = []
    },
    setDrop(type){
      this.numsListL.forEach(item => {
        item.remark = 1
      })
      this.numsListR.forEach(item => {
        item.remark = 1
      })
      this.numsListB.forEach(item => {
        item.remark = 1
      })
      this.numsListD.forEach(item => {
        item.remark = 1
      })
      this.selectedRows = []
      this.selectedRightRows = []
      this.selectedBotRows = []
      this.selectedDoeRows = []
      this.removeOdLines()
      this.multipleSelection = []
      this.multipleSelectionR = []
      this.multipleSelectionB = []
      this.multipleSelectionD = []
      this.removeClickInfo()
      this.removePolyLineList()
      if(type == 1){
        this.showFirBtn = true
      }else if(type == 2){
        this.showFirBtn = false
      }
    },
    removeClickInfo(){
      this.clickInfos.forEach(item => {
        item.hide()
      })
    },
    fomatwkt(wkt){
      let wktArr = wkt.split(';')
      return wktArr.map(item => item.split(','))
    }
  },
  beforeDestroy(){
    this.removeOdPoiIcons()
  }
}
</script>

<style lang="less" scoped>
.optBtn{
  position: absolute;
  right: 90px;
  top: 95px;
  z-index: 99;
  width: 260px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .optBtnBut{
    width: 86px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 4px;
    font-weight: 700;
    cursor: pointer;
    background: #FFF;
    color: #000;
  }
  .optBtnBom{
  }
  .optBtnTop{
    background: rgb(64, 149, 229);
    color: #FFF;
  }
}
.optRight{
  position: absolute;
  z-index: 99;
  right: 30px;
  top: 145px;
  display: flex;
  border: 1px solid;
  border-image: linear-gradient(to bottom, #5b8aa5 0%, #0d1036 1%, rgb(49 49 49) 70%, #1051af 100%) 1;
  & /deep/ .el_table{
    background: rgba(4,11,51,0.6);
    .has-gutter th{
      background: rgba(57, 104, 203,0.7);
    }
    thead th:first-child .cell{
      padding-left: 14px;
    }
    .el-table__cell{
      padding: 3px 0;
      background: transparent;
      color: #FFF;
    }
    // .el-table__body{
    //   width: 180px !important;
    // }
    .el-table__body tr.el-table__row--striped td.el-table__cell{
      background: transparent;
      color: #FFF;
    }
    .el-table__row:hover{
      background: none;
    }
    .el-table__body tr:hover>td.el-table__cell{
      background: none;
    }
    tr{
      background: transparent;
    }
    .el-table__body-wrapper .el-table__row .cell{
      color: #ccc;
    }
    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
      background-color: #40d7ff;
      border-color: #40d7ff;
    }
    .el-table__body-wrapper .selected-row .cell{
      color: #40d7ff;
    }
    .el-table__body-wrapper::after{
      border: 1px solid #1163FF;
    }
    .el-checkbox__input.is-disabled .el-checkbox__inner{
      background: #83878e;
    }
  }
  & /deep/ .el_right_table{
    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
      background-color: #5fe43d;
      border-color: #5fe43d;
    }
    .el-table__body-wrapper .selected-right-row .cell{
      color: #5fe43d;
    }
  }
  // & /deep/ .el_table_NoTitle{
  //   .el-table__header-wrapper{
  //     height: 5px;
  //     background: rgba(26, 44, 82, 1);
  //     th{
  //       display: none;
  //     }
  //   }
  // }
}
</style>